<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%><!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author"
	content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.8.6">
<title>欢迎登陆</title>

<!-- Bootstrap core CSS -->
<link
	href="${pageContext.request.contextPath}/resource/bootstrap4/css/bootstrap.css"
	rel="stylesheet">
<script type="text/javascript"
	src="${pageContext.request.contextPath}/resource/js/jquery-3.2.1.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/resource/js/jquery.validate.js"></script>
<meta name="theme-color" content="#563d7c">


<style>
.bd-placeholder-img {
	font-size: 1.125rem;
	text-anchor: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

@media ( min-width : 768px) {
	.bd-placeholder-img-lg {
		font-size: 3.5rem;
	}
}
</style>
<!-- Custom styles for this template -->
<link
	href="${pageContext.request.contextPath}/resource/css/floating-labels.css"
	rel="stylesheet">
</head>
<body>
	<form class="form-signin" id="loginForm">
		<div class="text-center mb-4">
			<img class="mb-4"
				src="${pageContext.request.contextPath}/resource/img/hgshop.jpg"
				alt="" width="72" height="72">
			<h1 class="h3 mb-3 font-weight-normal">豪格商城</h1>
		</div>

		<!-- 显示提示信息的区域 -->
		<div class="form-label-group">
			<span><font style="color: red" id="msg">${msg }</font></span>
		</div>
		<div class="form-label-group">
			<input type="text" id="name" name="username" class="form-control"
				placeholder="用户名" > <label
				for="name"></label>
		</div>

		<div class="form-label-group">
			<input type="password" id="password" name="password"
				class="form-control" placeholder="密码" > <label
				for="password"></label>
		</div>
		<!-- 
  <div class="checkbox mb-3">
    <label>
      <input type="checkbox" value="remember-me"> 记住
    </label>
  </div> -->
		<button type="submit" id="loginBtn" class="btn btn-primary">登陆</button>
		<p class="mt-5 mb-3 text-muted text-center">© 2017-2222</p>
		<a href="toRegister">没有账号?,点击这里</a>
	</form>

	<script type="text/javascript">

		//想使用jquery validate来校验表单的步骤
		//1.必须引入jquery validate 的js文件
		//2.还需要引入 validate的中文提示包

		//3.开始校验
		$("#loginForm").validate({
			rules:{
				username:{
					required: true,
					minlength:5,
					maxlength:10
				},
				password:{
					required: true
				}
			},
			messages:{
				username:{
					required:"必须输入用户名",
					minlength:"账号必须大于5个字符",
					maxlength:"账号必须小于10个字符"
				},
				password:"必须输入密码"
			},
			submitHandler:function(form){
				var formData = new FormData($("#loginForm")[0]);
				$.ajax({
					url : "/login",
					data : formData,
					type : "post",
					processData : false,
					contentType : false,
					success : function(data) {
						if (data) {
							location.href = "/";
						} else {
							//alert("密码错误")
							$("#msg").text("");
							$("#msg").text("密码错误")
						}

					}
				})
			}
			
		})
	
		/* function submitForm() {
			var formData = new FormData($("#loginForm")[0]);
			$.ajax({
				url : "/login",
				data : formData,
				type : "post",
				processData : false,
				contentType : false,
				success : function(data) {
					if (data) {
						location.href = "/";
					} else {
						//alert("密码错误")
						$("#msg").text("");
						$("#msg").text("密码错误")
					}

				}
			})
		} */
	</script>

</body>
</html>